<!--********************************************************************
* Copyright© 2000 - 2024 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title data-i18n="resources.title_tiledMapLayer"></title>
    <!-- <script type="text/javascript" src="../js/include-web.js"></script> -->
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
        var attribution =
            "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";


        // 方式一：1.调用 mapboxgl.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
        // mapboxgl.supermap
        //     .initMap(host + '/iserver/services/map-china400/rest/maps/China')
        //     .then(function (result) {
        //         var map = result.map;
        //         map.addControl(new mapboxgl.NavigationControl(), 'top-left');
        //     });

        // 方法二： 直接用 mapboxgl.Map 初始化
        var map = new mapboxgl.Map({
            container: 'map', // container id
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "attribution": attribution,
                        "type": "raster",
                        "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true'],
                        "tileSize": 256
                    }
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    paint: { "raster-opacity": 1 },
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22
                }]
            },
            center: [120.143, 30.236], // starting position
            zoom: 3 // starting zoom
        });
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');

        map.on("click", e => {
            console.log(e);
            map.removeImage("cat")
        })

        map.on('load', () => {
            // Load an image from an external URL.
            map.loadImage(
                'https://docs.mapbox.com/mapbox-gl-js/assets/cat.png',
                // 'https://ts1.tc.mm.bing.net/th/id/R-C.b8224dee18b11eb370a4b55a4090240f?rik=EuOjQ9Qb7ZUz5g&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50064%2f9111.jpg_wh1200.jpg&ehk=pZpVfae0YY5yUntOfM6yyNgyB7OU%2bIiHJUCbLvp24To%3d&risl=&pid=ImgRaw&r=0',
                (error, image) => {
                    if (error) throw error;

                    // Add the image to the map style.
                    map.addImage('cat', image);

                    // Add a data source containing one point feature.
                    map.addSource('point', {
                        'type': 'geojson',
                        'data': {
                            'type': 'FeatureCollection',
                            'features': [
                                {
                                    'type': 'Feature',
                                    'geometry': {
                                        'type': 'Point',
                                        'coordinates': [-77.4144, 25.0759]
                                    }
                                },
                                {
                                    'type': 'Feature',
                                    'geometry': {
                                        'type': 'Point',
                                        'coordinates': [135.46387438591398, -25.515079358538074]
                                    }
                                }
                            ]
                        }
                    });

                    // Add a layer to use the image to represent the data.
                    map.addLayer({
                        'id': 'points',
                        'type': 'symbol',
                        'source': 'point', // reference the data source
                        'layout': {
                            'icon-image': 'cat', // reference the image
                            'icon-size': 0.25
                        }
                    });
                }
            );
        });
    </script>
</body>

</html>